<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 
        script脚本标签增加 module 属性时，在该脚本内可以直接使用ES6 模块语法规则
        script 脚本增加 type=module 后，内部脚本区将转变为严格语法模式
    -->
    <script>
        function printThis(){
            console.log(this)
        }
        printThis(); // this=>window
        // let a = "测试数据";
    </script>
    <script type="module">
        function printThis(){
            console.log(this)
        }
        printThis(); // this=>undefined
        // let a = "测试数据";

        // commonjs module
        //     require
        //     exports   module.exports

        // ES6 module
        // ES6的模块化语法功能分为两套语法规范
        //     1、导入语法规范：完成模块JS文件的导入操作
        //          import + from 关键字
        //        导入定义
        //          1.默认导入语法  import 自定义变量名 from "绝对或相对路径"
        //              + 自定义变量名 接收导入模块文件的 export default 的 数据
        //              + 被导入的模块会经过 模块包装器 完成模块环境的独立
        //                      模块包装器  (function(){})()
        //                      未被导出的模块数据变量，在模块中可以继续使用，
        //                      但不能对外公开使用，这类变量为模块私有变量
        //              + 模块缓存机制:在同一个运行环境下，相同模块只会被加载一次，后续的读取均为缓存读取
        //          2.单数据导入语法   import { 导出的变量,…… } from "模块路径"
        //              + 重命名导入   import { 导出的变量 as 新变量名,…… } from "模块路径"
        //              + 统一组合重命名导入 import * as 变量名 from "模块路径"
        //          3.混合导入语法
        //                     import 默认导出变量,{ 单导出变量,…… } from "模块路径"
        //                     import 默认导出变量,{ 单导出变量 as 新变量名,…… } from "模块路径"
        //                     import 默认导出变量,* as 变量名 from "模块路径"
        //        注意事项
        //          + 浏览器的导入模块在运行页面时使用的是异步请求技术完成的模块文件加载，
        //            受限于安全性问题，无法通过非网络协议执行
        //          + 受限于浏览器对ES6语法的支持，目前不能省略模块文件后缀名
        //          + 受限于浏览器对ES6语法的支持，目前仅支持绝对路径和以 ./ ../ 开头的相对路径

        //     2、导出语法规范：书写JS构建模块JS文件的操作
        //          export + default 关键
        //        模块定义
        //          1.默认导出模块  export default 导出数据
        //          2.单数据导出模块 export 变量声明表达式
        //              对外进行模块数据公开时，会先完成单导出数据的自动对象整合
        //          3.混合导出模块  默认导出模块+单数据导出模块
         
        import moduleA from "./modules/moduleA.js";
        
        import moduleB from "./modules/moduleB.js";
        console.log(moduleA,moduleB)
        // console.log(password)
        moduleA.getPassword()
        moduleB.getPassword()
        
        // 模块缓存
        import moduleA1 from "./modules/moduleA.js";
        // import moduleA2 from "./modules/moduleA.js";
        // import moduleA3 from "./modules/moduleA.js";
        console.log( moduleA==moduleA1 )
        moduleA.msg = "新消息";
        console.log(moduleA)
        console.log(moduleA1)

        // import moduleC from "./modules/moduleC.js"
        import { moduleName,user,arr,printFun,showFun } from "./modules/moduleC.js"
        console.log(moduleName)
        console.log(user)
        console.log(arr)
        console.log(printFun)
        console.log(showFun)

        // 下述代码中 moduleName 用于解构取值，取出的值被重新定义为变量 moduleDName
        import { moduleName as moduleDName,arr as moduleDArr } from "./modules/moduleD.js"
        // console.log(moduleName)
        console.log(moduleDName,moduleDArr)

        // 统一重命名整合导入
        import * as moduleC from "./modules/moduleC.js"
        console.log( moduleC )
        console.log( moduleC.moduleName )

        // import moduleE from "./modules/moduleE.js"
        // import { info } from "./modules/moduleE.js"
        // import moduleE,{ info } from "./modules/moduleE.js"
        // console.log(moduleE)
        // console.log(info)

        // import moduleE,{ info as newInfo } from "./modules/moduleE.js"
        // console.log(moduleE)
        // console.log(newInfo)

        import moduleE,* as obj from "./modules/moduleE.js"
        console.log(moduleE)
        console.log(obj)


    </script>
</head>
<body>
    
</body>
</html>